﻿{{ extend './layout/main.html' }}

{{ block 'style' }}
<style type="text/css">
    #box {
        background-color: rgba(0, 0, 0, 0.2);
        width: 300px;
        height: 360px;
        margin-top: 10px;
        overflow: hidden;
        padding: 0;
    }

    #box p {
        padding: 0 15px;
    }

    #lrc {
        min-width: 300px;
        margin-top: 130px;
        position: absolute;
        text-align: center;
        padding-top: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

    .gl {
        color: white;
        background-color: hotpink;
    }

</style>
{{ /block }}

{{ block 'content' }}
<div class="container">
    <div class="page-header">
        <h1>首页--<small>我的音乐</small></h1>
    </div>
    <a href="/music/add" class="btn btn-success">添加音乐</a>
</div>
<div class="container">
    <div class="row" style="display: flex;">
        <div style="flex: 3; margin-right: 10px;">
            <table class="table table-striped table-hover">
                <thead>
                    <th>歌曲标题</th>
                    <th>歌手</th>
                    <th>时长</th>
                    <th>编辑</th>
                    <th>删除</th>
                    <th>播放</th>
                </thead>
                <tbody class="list_container" id="list_container">
                    {{ each musics }}
                        <tr>
                            <td>{{ $value.title }}</td>
                            <td>{{ $value.singer }}</td>
                            <td>{{ $value.time }}</td>
                            <td><a href="/music/edit?id={{ $value.id }}">编辑</a></td>
                            <td><a class="del" href="javascript:delMusic(id={{ $value.id }})">删除</a></td>
                            <td>
                                <span
                                    file="{{ $value.file }}"
                                    filelrc="{{ $value.filelrc }}"
                                    style="cursor:pointer"
                                    class="glyphicon glyphicon-play-circle ply">
                                </span>
                            </td>
                        </tr>
                    {{ /each }}
                </tbody>
            </table>
        </div>
        <div style="flex: 2">
            <p>正在播放音乐:</p>
            <audio id="audio" autoplay src="" controls="controls">
            </audio>
            <div id="box" class="col-md-3">
                <div id="lrc">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 删除歌曲
    function delMusic(id) {
        console.log(id);
        if (confirm('确定删除该歌曲吗?')) {
            $.ajax({
                url: '/music/del-music',
                type: 'delete',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    // console.log(data);
                    if (data.code === '001') {
                        alert(data.msg);
                        window.location.reload();
                    }
                }
            })
        }
    }

    // 解析歌词
    function parseLrc(lrc) {
        var tempObj = {};
        // [00:00.98]告白气球

        // 1. 以换行符切割字符串
        var lines = lrc.split('\n');

        // [00:00.98]告白气球 => `/\[(\d{2})\:(\d{2})\.(\d{2})\](.*)/`
        var regex = /\[(\d{2})\:(\d{2})\.(\d{2,5})\](.*)/;
        // 2. 遍历该数组，以正则来匹配数据，获取时间和歌词
        for(var i = 0; i < lines.length; i++) {
            var line = lines[i];
            var result = regex.exec(line);

            if (!result) continue; // 不匹配的跳过

            var minute = result[1]; // 分
            var second = result[2]; // 秒
            // var  millisecond = result[3]; // 毫秒
            var content = result[4]; // 歌词

            // 3. 计算时间作为 key，将其与歌词为对象添加属性
            var key = (minute * 60) + (second - 0);
            tempObj[key] = content;
        }
        
        // 4. 返回这个对象
        return tempObj;
    }

    // 生成 DOM
    function createDOM(lrcObj) {
        var html = '';
        for (var time in lrcObj) {
            html += '<p time="' + time + '">' + lrcObj[time] + '</p>';
        }
        $('#lrc').html(html);
    }

    // 滚动歌词
    function scroll(lrcObj) {
        // 监听歌曲播放事件
        // audio 的 timeupdate 事件：获取 e.target.currentTime
        $('#audio').on('timeupdate', function(e) {
            // console.log(e.target.currentTime);
            // 四舍五入时间
            var second = Math.round(e.target.currentTime);
            // console.log(second);

            // 判断是否可以滚动
            if (!lrcObj[second]) return;

            // 滚动逻辑
            var $lrc = $('#lrc');
            // 1. 查找该歌词的 p 标签
            var $p = $lrc.find('p[time=' + second + ']'); // p[time=1]
            // 2. 计算   p 标签的top值 - lrc的top  的差值
            var minus = $lrc.offset().top - $p.offset().top;
            // 3. 将差值作为 lrc 向上移动的距离值
            $lrc.animate({
                top: minus
            }, 'slow');
            // 4. 给这个 p 标签加样式，移除其他元素的样式
            $p.addClass('gl').siblings().removeClass('gl');
        });
    }

    // 1. 获取歌词
    $('.ply').on('click', function() {
        // 获取 url 歌曲+歌词
        var file = $(this).attr('file')
        var filelrc = $(this).attr('filelrc')
        $.ajax({
            url: filelrc,
            type: 'get',
            success: function(res) {
                // 2. 解析歌词
                var lrcObj = parseLrc(res);

                // 3. 生成 DOM 结构, 并添加 时间属性作为查找元素的依据
                createDOM(lrcObj);

                // 4. 滚动
                scroll(lrcObj);

                // 播放音乐
                $('#audio').attr('src', file);
            }
        })    
    });


</script>
{{ /block  }}
